<template>
  <div>
    <div>
      <el-form style="text-align: left" :model="searchMsg" status-icon :inline="true" ref="searchFrom"
               label-width="100px" class="demo-form-inline">
        <el-form-item label="角色名称" prop="rolename">
          <el-input v-model.number="searchMsg.rolename"></el-input>
        </el-form-item>
        <br>
        <el-form-item style="margin-left:  500px">
          <el-button type="primary" @click="search()">搜索</el-button>
          <el-button @click="restSearch()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align: left">
      <el-button type="succes" @click="popAdd()">添加一个</el-button>
      <el-button type="danger" @click="removeSelect()">删除选中</el-button>
    </div>
    <el-table
        ref="multipleTable"
        :data="roleMsgs"
        tooltip-effect="dark"
        style="width: 100%;text-align: center"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="roleid"
          label="角色id"
      >
      </el-table-column>
      <el-table-column
          prop="rolename"
          label="角色名字"
      >
      </el-table-column>
      <el-table-column
          prop="roledesc"
          label="角色描述"
      >
      </el-table-column>
      <el-table-column
          prop="available"
          label="可用状态"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.available===1">
            <el-tag type="success">可用</el-tag>
          </div>
          <div v-else>
            <el-tag type="danger">不可用</el-tag>
          </div>
          <br>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
      >
        <template slot-scope="scope">
          <el-button @click="popModify(scope.row)" type="primary" size="small">编辑</el-button>
          <el-button @click="popPermy(scope.row)" type="" size="small">分配权限</el-button>
          <el-button @click="removeOne(scope.row.roleid)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[3,5,10,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <el-dialog
        title="添加"
        :visible.sync="addFlag"
        width="30%"
        :before-close="handleClose">
      <el-form :model="roleMsg" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名字" prop="rolename">
          <el-input v-model.number="roleMsg.rolename"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roledesc">
          <el-input v-model="roleMsg.roledesc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否可用" prop="available">
          <el-radio v-model="roleMsg.available" label="1">可用</el-radio>
          <el-radio v-model="roleMsg.available" label="0">不可用</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add()">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button @click="addFlag = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--    修改-->
    <el-dialog
        title="修改"
        :visible.sync="modifyFlag"
        width="30%"
        :before-close="handleClose">
      <el-form :model="roleMsg" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名字" prop="rolename">
          <el-input v-model.number="roleMsg.rolename"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roledesc">
          <el-input v-model="roleMsg.roledesc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否可用" prop="available">
          <el-radio v-model="roleMsg.available" label="1">可用</el-radio>
          <el-radio v-model="roleMsg.available" label="0">不可用</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="modify()">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button @click="addFlag = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
        title="分配权限"
        :visible.sync="permyFlag"
        width="30%"
        :before-close="handleClose">
      <el-tree
          :data="allPermission"
          show-checkbox
          node-key="id"
          ref="rootTree"
          :props="defaultProps">
      </el-tree>
      <el-button type="primary" @click="modifyPermy()">提交</el-button>
      <el-button @click="clearPermy()">重置</el-button>
      <el-button @click="permyFlag = false">取 消</el-button>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "usermenu",
  data() {

    return {
      // 角色数据
      roleMsgs: [],
      // 选择框数据
      multipleSelection: [],
      // 分页数据
      pageIndex: 1,
      pageSize: 5,
      total: 0,
      // 添加提示框标记
      addFlag: false,
      // 修改的标记
      modifyFlag: false,
      // 权限修改的标记
      permyFlag: false,
      // 要被添加的用户信息
      roleMsg: {},
      // 搜索的条件
      searchMsg: {},
      // 全部权限
      allPermission:[],
      // 当前角色的权限
      rolePermission:[],
      // 临时的角色信息
      tempRole:{},
      // 自定义的树形节点配置信息，children代表子菜单的key，label代表标签
      defaultProps: {
        children: 'childMenu',
        label: 'title'
      }
    };
  },
  // 页面初始化方法
  created() {
    this.flushPage()
  },
  methods: {
    // 复选框的方法
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 分页的方法，当页面大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.flushPage()
    },
    // 当页面下标改变
    handleCurrentChange(val) {
      this.pageIndex = val
      this.flushPage()
    },
    // 删除这条记录
    removeOne(id) {
      let ids = []
      ids.push(id)
      this.removeBeach(ids)
    },
    // 删除选中
    removeSelect() {
      let ids = []
      this.multipleSelection.forEach(row => {
        ids.push(row.roleid)
      })
      this.removeBeach(ids)
    },
    // 批量删除记录
    removeBeach(ids) {
      const h = this.$createElement
      // 发送请求
      this.$http.post("http://127.0.0.1:8081/Role/Remove", ids).then(resp => {
        if (resp.data.code === 2000) {
          // 消息通知
          this.$notify({
            title: "消息",
            message: h("i", {style: "color: teal"}, resp.data.msg),
            duration: 4000
          })
          // 刷新页面
          this.flushPage()
        } else {
          // 消息通知
          this.$notify.error({
            title: "错误！",
            message: h("i", {style: "color: red"}, resp.data.msg),
            duration: 4000
          })
        }
      })
    },
    // 弹出对话框
    popAdd() {
      this.addFlag = true
    },
    // 弹出修改
    popModify(rowMsg) {
      this.roleMsg = rowMsg
      this.modifyFlag = true
    },
    // 弹出权限
    popPermy(row) {
      this.tempRole = row
      this.clearPermy()
      this.permyFlag = true
      this.$http.get("http://127.0.0.1:8081/Role/GetMenus/"+row.roleid).then(resp=>{
        this.rolePermission=resp.data.data
        setTimeout(() => {
          this.rolePermission.forEach(value => {
            this.$refs.rootTree.setChecked(value, true, false);
          })
        }, 100)
      })
    },
    // 清空树形空间
    clearPermy(){
      this.$nextTick(() => {
        this.$refs.rootTree.setCheckedKeys([]);
      });
    },
    // 确定提交添加操作
    add() {
      const h = this.$createElement
      this.$http.post("http://127.0.0.1:8081/Role/Add", this.roleMsg).then(resp => {
        if (resp.data.code === 2000) {
          // 消息通知
          this.$notify({
            title: "消息",
            message: h("i", {style: "color: teal"}, " 插入成功！"),
            duration: 4000
          })
        } else {
          this.$notify({
            title: "消息",
            message: h("i", {style: "color: red"}, "插入失败"),
            duration: 4000
          })
        }
        this.handleClose()
        this.flushPage()
      })

    },
    // 修改用户信息
    modify() {
      this.$http.post("http://127.0.0.1:8081/Menu/Modify", this.roleMsg).then(resp => {
        if (resp.data.code === 2000) {
          this.$notify({
            title: "消息",
            message: "更新成功",
            duration: 4000
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: '更新失败'
          });
        }
      })
      this.handleClose()
      this.flushPage()
    },
    // 对话框关闭之后
    handleClose() {
      this.roleMsg = {}
      this.$nextTick(() => {
        this.$refs['ruleForm'].resetFields();
      })
      this.addFlag = false
      this.modifyFlag = false
      this.permyFlag = false
    },
    resetForm() {
      this.roleMsg = {}
      this.$nextTick(() => {
        this.$refs['ruleForm'].resetFields();
      })
    },
    // 重置搜索菜单
    restSearch() {
      this.$nextTick(() => {
        this.$refs['searchFrom'].resetFields();
      })
    },
    // 执行搜索方法
    search() {
      this.$http.post("http://127.0.0.1:8081/Role/GetRoles", this.searchMsg).then(resp => {
        this.roleMsgs = resp.data.data
      })
    },
    modifyPermy() {
      // 一级菜单的id
      let a = this.$refs.rootTree.getCheckedKeys()
      // 二级菜单的id
      let b = this.$refs.rootTree.getHalfCheckedKeys()
      // 一二级合并起来
      let permissionsId = a.concat(b)
      // 发送请求更行sys_menu_role表
      this.$http.post("/Role/ModifyRoleMenu/"+this.tempRole.roleid,permissionsId).then(resp=>{
        if (resp.data.code===2000){
          this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success'
          });
        }
        this.permyFlag=false
      })
    },
    // 刷新页面的方法
    flushPage() {
      this.$http.get("Role/List/" + this.pageIndex + "/" + this.pageSize).then(resp => {
        console.log(resp.data.data)
        // 放入菜单信息
        this.roleMsgs = resp.data.data.records;
        // 放入分页数据
        this.total = resp.data.data.total
      })
      this.$http.get("User/Menu/-1").then(resp=>{
        this.allPermission=resp.data.data
        console.log(this.allPermission)
      })
    }
  }
}

</script>

<style scoped>

</style>
